<template>
  <div >

    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <date-range-picker v-model="query.queryTime" valueFormat="timestamp" class="date-item"
                           @keyup.enter.native="crud.toQuery" @input="$forceUpdate()"
                           popper-class="picker-popper"
        />
        <el-select v-model="query.dealer_id" filterable placeholder="请选择单位" style="width: 185px;" class="filter-item" clearable>
          <el-option v-for="item in dict.dealers" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.equipment_type" filterable placeholder="请选择农机类型" style="width: 185px;" class="filter-item" clearable>
          <el-option v-for="item in dict.equipment_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.interface_type" filterable placeholder="请选择接口类型" style="width: 185px;" class="filter-item" clearable>
          <el-option v-for="item in dict.eq_interface_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="query.q_code" clearable placeholder="请输入农机制造编号/发动机编号/机械环保代码" style="width: 280px;" class="filter-item" @keyup.enter.native="crud.toQuery" />


        <rrOperation />
        <el-button type="primary" style="margin-bottom: 10px; vertical-align: middle;" size="mini" icon="el-icon-download" @click="downloadExcel">导出</el-button>
      </div>
      <crudOperation />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading"  :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <!--      <el-table-column prop="dealer_name" label="所属单位" width="200" />-->
      <el-table-column prop="customer_name"  label="所属单位" width="150" fixed="left"/>
      <el-table-column prop="eq_type"  label="农机类型" width="100" fixed="left"/>
      <el-table-column prop="work_date"  label="作业日期" width="100" fixed="left"/>
      <el-table-column prop="work_area" label="作业面积(亩)" width="100" align="center"/>
      <el-table-column prop="distance" label="行驶里程(KM)" width="100" align="center"/>
      <el-table-column prop="work_cost" label="作业时长(H)" width="100" align="center"/>
      <el-table-column prop="province" label="所在省" width="200" align="center"/>
      <el-table-column prop="city" label="所在市" width="200" align="center"/>
      <el-table-column prop="district" label="所在区县" width="200" align="center"/>
    </el-table>
    <!--分页组件-->
    <pagination />

  </div>
</template>

<script>

import CRUD, { crud, form, header, presenter } from '@crud/V2/crud'
import crudOperation from '@crud/V2/CRUD.operation'
import pagination from '@crud/V2/Pagination'
import rrOperation from '@crud/V2/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'

export default {
  name: 'summaryCustomerReport',
  components: { pagination, crudOperation, rrOperation,DateRangePicker },
  cruds() {
    return CRUD({ url: 'api/v2/biz/workArea/summaryCustomer' })
  },
  mixins: [presenter(), header()],
  dicts: ['equipment_type', 'eq_interface_type'],
  dictsV2: ['farms','dealers'],
  props: {
    eqObj: {
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    const _this = this
    return {
      syncLoading: false,
      eqCode: "",
    }
  },
  watch: {

  },
  created() {
    this.crud.optShow = { add: false, edit: false, del: false, download: false }
    const today = new Date();
    const yesterday = new Date(today.getTime() - 1000*60*60*24*7);
    this.query.queryTime = [new Date(yesterday.getUTCFullYear(),yesterday.getMonth(),yesterday.getDate(),"0","0","0").getTime(),new Date(today.getUTCFullYear(),today.getMonth(),today.getDate(),23,59,59).getTime()]
    this.crud.toQuery()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if(this.query.queryTime) {
        this.query.start_ts = this.query.queryTime[0]
        this.query.end_ts = this.query.queryTime[1]
        return true
      }
      return false
    },
    [CRUD.HOOK.afterRefresh]() {
      // console.log(this.crud.data);
    },

    // 入参 fmt-格式 date-日期
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    },
    parseTime(time, cFormat) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string')) {
          if ((/^[0-9]+$/.test(time))) {
            time = parseInt(time)
          } else {
            time = time.replace(new RegExp(/-/gm), '/')
          }
        }

        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
    },
    downloadExcel(){
      this.crud.doExport()
    }
  }
}
</script>

<style scoped>


.chart{
  width: 1400px;
  height: 300px;
}
.section{
  padding:20px;
  background-color: white;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>

<style>
.picker-popper .el-date-table .badge::after {
  position: absolute;
  content: "";
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
}
</style>
